<!DOCTYPE html>
<html>
<head>
    {% load static %}
    <meta charset="utf-8" >
    <title>新能源汽车</title> 
    <link rel="stylesheet" href="{% static 'index1.css' %}" media="all">
    <link rel="stylesheet" href="{% static 'layui/css/layui.css' %}" media="all">
    <script src="{% static 'jquery.min.js' %}"></script>
    <link rel="icon" href="{% static 'xny.ico' %}" type="image/x-icon">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% block head %}
    {% endblock %}
<style>
    

  /* 模态框的基本样式 */
.modal {
  display: none; /* 默认隐藏 */
  position: fixed; /* 固定定位 */
  top: 30%; /* 距离屏幕顶部20% */
  left: 50%; /* 水平居中（通过transform偏移）*/
  transform: translateX(-50%); /* 向左偏移自身宽度的50%，实现水平居中 */
  width: 250px; /* 宽度 */
  height: 140px; /* 高度 */
  background-color: rgba(241, 241, 241, 0.9); /* 黑色背景，80%透明度 */
  border-radius: 10px; /* 圆角 */
  z-index: 1000; /* 确保模态框位于顶层 */
  overflow: auto; /* 如果内容过多，允许滚动 */
  padding: 20px; /* 内边距 */
  box-sizing: border-box; /* 包括内边距和边框在宽度和高度内 */
}

/* 模态框内容的样式（如果需要的话） */
.modal-content {
  /* 这里可以根据需要添加样式，但在这个例子中，我们主要关注.modal的样式 */
}

/* 关闭按钮的样式 */
.close {
  float: right; /* 浮动到右侧 */
  font-size: 28px; /* 字体大小 */
  font-weight: bold; /* 字体加粗 */
  color: #f1f1f1; /* 字体颜色 */
  cursor: pointer; /* 鼠标悬停时显示指针 */
  /* 如果需要，可以添加一些内边距或外边距来调整位置 */
}

/* 当鼠标悬停在关闭按钮上时改变颜色 */
.close:hover,
.close:focus {
  color: #bbb; /* 悬停或聚焦时的颜色 */
  text-decoration: none; /* 去除下划线 */
  cursor: pointer; /* 指针样式 */
}

/* 确认链接的样式（如果需要的话） */
.confirm-login {
  display: block; /* 使其独占一行 */
  text-align: center; /* 文本居中 */
  margin-top: 10px; /* 上边距 */
  color: #fff; /* 文本颜色 */
  text-decoration: none; /* 去除下划线 */
  /* 其他样式，如字体大小、背景色等，可以根据需要添加 */
}
</style>
</head>
<body>
<!-------------------------------------导航栏------------------------------------->
<div class="layui-carousel">
 {% csrf_token %}
    <ul class="layui-nav" lay-filter="demo" style="width:100%;background-color:#92b8b1;">
        <li class="layui-nav-item" style="float: left" ><a href="/">
            <img src="{% static 'xny.png' %}" style="width:80px;height: 50px;">
            <img src="{% static 'zi.png' %}" style="width:100px;height: 50px;">
        </a></li>
        <li class="layui-nav-item" style="margin-left: 80px;float: left"><a href="/">首页</a></li>
        <li class="layui-nav-item" style="margin-left: 20px;float: left"><a href="/flashsale/">最新活动</a></li>
        <li class="layui-nav-item" style="margin-left: 20px;float: left"><a href="/car_model_all/">车型总览</a></li>
        <li class="layui-nav-item" style="margin-left: 20px;float: left"><a href="/analysis/">大数据</a></li>
        <li class="layui-nav-item" style="margin-left: 20px;">
            <a href="/forum/">用户讨论</a>
        </li>
        <form action="/car_model_all/search/" style="float: left" method="post">
            {% csrf_token %}
        <li class="layui-inline" style="margin-left: 20px;">
            <input type="text" class="layui-input" name="key" placeholder="请输入搜索内容" style="width: 400px;">
        </li>
        <li class="layui-nav-item">
            <button style="width: 40px;height: 40px;" class="layui-icon layui-icon-search"></button>
        </li>
       </form>
        <li class="layui-nav-item" style="margin-left: 20px;">
             {% if suser != None %}
            <a href="/reservation/">我的预约<span class="layui-badge">{{ number }}</span></a>
             {% else %}
            <a href="javascript:;" id="yuyue">我的预约</a>
            {% endif %}
        </li>
    <div id="loginModal" class="modal">
    <div class="modal-content">
        <span class="close" style="color: #75b798">&times;</span>
        <p style="font-size: 15px;color: black">温馨提示：</p>
        <p style="font-size: 15px;color: black;padding-top: 10px">您还是没有登入，是否立即前往登入注册！</p>
        <a href="/login/" class="confirm-login" style="color: #75b798;width: 50%">确认</a>
        <a href="javascript:;" class="close" style="width:40%;color: #75b798;font-size: 14px"><p
                style="margin-top:-19px">取消</p></a>
    </div>
</div>
        <li class="layui-nav-item" style="margin-left: 20px;">
            {% if suser != None %}
            <a href="#"><i class="layui-icon layui-icon-username"></i> {{ suser.name }}</a>
            <dl class="layui-nav-child">
                <dd><a href="/personal/">个人中心</a></dd>
                <dd><a href="/login/">切换账号</a></dd>
                <dd><a href="javascript:;" id="customer-service" data-value="{{ suser.id }}">联系客服</a></dd>
                <dd><a href="/logout/">退出登入</a></dd>
            </dl>
            {% else %}
            <a href="/login/"><i class="layui-icon layui-icon-username"></i> 登入注册</a>
            {% endif %}
        </li>
    </ul>
</div>

{% block content %}
{% endblock %}
<!-------------------------------------页尾------------------------------------->
<footer class="footer">  
    <div class="footer-content">  
        <div class="footer-column">  
            <h4>关于我们</h4>  
            <p>致力于为客户提供最优质的解决方案。</p>  
            <ul>  
                <li><a href="#">公司介绍</a></li>  
                <li><a href="#">团队风采</a></li>  
                <li><a href="#">合作伙伴</a></li>  
            </ul>  
        </div>  
        <div class="footer-column">  
            <h4>联系我们</h4>  
            <p>地址：广东省广州市黄埔区源祥路96号</p>  
            <p>电话：+86-123-4567-8901</p>  
            <p>邮箱：info@example.com</p>  
        </div>  
        <div class="footer-column">  
            <h4>社交媒体</h4>  
            <ul class="social-links">  
                <li><a href="https://www.facebook.com/yourpage" target="_blank"><i class="fab fa-facebook-f"></i></a></li>  
                <li><a href="https://twitter.com/yourpage" target="_blank"><i class="fab fa-twitter"></i></a></li>  
                <li><a href="https://www.instagram.com/yourpage" target="_blank"><i class="fab fa-instagram"></i></a></li>  
                <li><a href="https://www.linkedin.com/company/yourpage" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>  
            </ul>  
        </div>  
        <div class="footer-column">  
            <h4>订阅我们</h4>  
            <p>订阅我们的新闻动态，获取最新资讯。</p>  
            <form action="/subscribe" method="post">  
                <input type="email" name="email" placeholder="输入您的邮箱">  
                <button type="submit">订阅</button>  
            </form>  
        </div>  
    </div>  
    <div class="footer-bottom">  
        <p>© 作者：<a href="https://blog.csdn.net/qq_67061926?spm=1000.2115.3001.5343">ઈ一笑ഒ</a></p>  
    </div>  
</footer>
</body>
<script src="{% static 'layui/layui.js' %}"></script>
<script src="{% static 'index.js' %}"></script>
<script>
        $(document).ready(function () {
        // 点击购买按钮时显示模态框
        $("#yuyue").click(function () {
            $("#loginModal").css("display", "block");
        });

        // 点击关闭按钮或模态框外部时关闭模态框
        $(".close, #loginModal").click(function () {
            if ($(this).attr("id") != "loginModal") {
                // 防止点击模态框本身时关闭它
                return;
            }
            $("#loginModal").css("display", "none");
        });

        // 点击“确认”链接时跳转到登录页面
        $(".confirm-login").click(function (e) {
            e.preventDefault(); // 阻止链接的默认行为
            window.location.href = $(this).attr("href"); // 使用链接的href属性进行跳转
        });
        
        $("#customer-service").click(function() {
            {#alert(username)#}
            window.open('http://127.0.0.1:8000/chat/?group='+ {{ suser.id }}+"&user={{ suser.id }}" ,'_blank', 'width=600,height=600')
        });
});
 
</script>
{% block script %}
{% endblock %}
</html>
